<template>
  <el-date-picker
    v-model="dateValue"
    type="daterange"
    unlink-panels
    range-separator="➞"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :shortcuts="shortcuts"
     :disabledDate="disabledDateFn"
    @calendar-Change="calendarChange"
  />
</template>

<script lang="ts" setup>
/** 全局引入 */
import {
  ref,
  watch,
  defineEmits,
  computed,
  onBeforeMount,
  onMounted,
  onUnmounted,
  reactive,
} from "vue";
/** props数据 */
const props = defineProps({
  value: {
    type: [Array],
    default: () => [],
  },
  disabled: {
    type: Boolean,
    required: false,
    default: false,
  },
  startPlaceholder: {
    type: String,
    required: false,
    default: "开始日期",
  },
  endPlaceholder: {
    type: String,
    required: false,
    default: "结束日期",
  },
  // 是否控制选择范围
  intervalIs: {
    type: Boolean,
    required: false,
    default: false,
  },
  // 选择范围多少天之内（从开始日期到结束日期）默认31天
  intervalDay: {
    type: Number,
    required: false,
    default: 31,
  },
  // 最多选择几年前的数据 默认3年
  maxYear: {
    type: Number,
    required: false,
    default: 3,
  },
});

const dateValue = ref(props.value);
const pickerMinDate = ref();
const shortcuts = [
  {
    text: "◎ 当天",
    onClick() {
      const end = new Date();
      const start = new Date(new Date().toDateString());
      end.setTime(start.getTime());
      return [start, end];
    },
  },
  {
    text: "◎ 近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
  },
  {
    text: "◎ 近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    },
  },
];
const calendarChange = (obj: any) => {
  const minDate = obj[0]
  const maxDate = obj[1]
  // 把选择的第一个日期赋值给一个变量。
  pickerMinDate.value = minDate.getTime();
  // 如何你选择了两个日期了，就把那个变量置空
  if (maxDate) pickerMinDate.value = null;
}
const disabledDateFn = (time: any) => {
  if (props.intervalIs) {
    const date = new Date();
    const year = date.getFullYear() - props.maxYear;
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const dayTime = String(date.getDate()).padStart(2, "0");
    const minyeay = new Date(`${year}-${month}-${dayTime}`).getTime();
    if (pickerMinDate.value) {
      const day = props.intervalDay - 1 || 30;
      const one = day * 24 * 3600 * 1000;
      const minTime = pickerMinDate.value - one;
      const maxTime = pickerMinDate.value + one;
      return (
        time.getTime() < minTime ||
        time.getTime() > maxTime ||
        time.getTime() > new Date().getTime()
      );
    } else {
      return time.getTime() < minyeay || time.getTime() > new Date().getTime();
    }
  } else {
    return false;
  }
};

/** 侦听 */
/** 计算 */

/** 方法 */

/** 生命周期钩子 */
onBeforeMount(() => {
  // console.log('挂载前');
});
onMounted(() => {
  // console.log('挂载完成');
});
onUnmounted(() => {
  // console.log('销毁完成');
});
</script>

<style lang="scss" scoped>
.search-header-box {
  background-color: #fff;
  height: auto !important;
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}

.menu-name {
  border-left: 4px solid var(--theme-primary);
  height: 16px;
  margin-bottom: 20px;
  display: flex;
  padding-left: 13px;
  align-items: center;
  font-weight: 400;
  color: var(--text-black-85);
  font-size: var(--font-size-16);
  font-family: "SourceHanSans-Medium";
}
</style>

<style lang="scss">
.search-header-box {
  .el-form-item--small.el-form-item {
    margin-bottom: 12px !important;
  }
}
</style>
